<style lang="less" scoped>
// 定义动画
@keyframes ani {
    0% {
        height: 30px;
    }
    50% {
        height: 100px;
    }
    100% {
        height: 30px;
    }
}

 .loading {
    width: 100%;
    height: 150px;
    ul {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
        li {
            width: 4px;
            height: 100px;
            background-color: #eb4955;
            margin: 0 10px;
        }
        li:nth-child(1) {
            animation: ani .5s infinite linear .1s;
        }
        li:nth-child(2) {
            animation: ani .5s infinite linear .15s;
        }
        li:nth-child(3) {
            animation: ani .5s infinite linear .25s;
        }
        li:nth-child(4) {
            animation: ani .5s  infinite linear .2s;
        }
        li:nth-child(5) {
            animation: ani .5s infinite linear .16s;
        }
    }
 }
</style>
<template>
	<view class="loading">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</view>
</template>

<script>
	export default {
		name: "loading",
		data() {
			return {

			};
		}
	}
</script>
